<template id = "console-index">
  <div>
    <div>
      <my-charts :option="barChartsOption" ref="barCharts" />
    </div>
    <template>
      <h3>最新评价</h3>
      <el-carousel height="200px" direction="vertical" :autoplay="true">
        <el-carousel-item v-for="(item,key) in comments" :key="key">
          <h4 class="medium">{{item.articleName}}</h4>
          <p class="medium">{{item.commentContent}}</p>
        </el-carousel-item>
      </el-carousel>
    </template>
  </div>
</template>
  </div>
</template>

<script>
import charts from "../../../Charts.vue";
export default {
  components: {
    "my-charts": charts,
  },
  data() {
    return {
      barChartsOption: {
        title: {
          text: "阅读量",
        },
        tooltip: {},
        legend: {
          data: ["当日阅读量", "总阅读量"],
        },
        xAxis: {
          data: [],
        },
        yAxis: {},
        series: [
          {
            name: "当日阅读量",
            type: "bar",
            data: [],
          },
          {
            name: "总阅读量",
            type: "bar",
            data: [],
          },
        ],
      },
      comments: [],
    };
  },
  methods: {
    getTodayReadNum() {
      var user = this.$cookies.get("user");
      this.COMMON.httpPost(
        this,
        "articleOperation/getReadNum",
        { del: "0", available: "1", authorId: user.id },
        (result) => {
          if (result.result === "SUCCESS") {
            result.list.forEach((element) => {
              this.barChartsOption.xAxis.data.push(element.article);
              this.barChartsOption.series[0].data.push(element.num);
              this.barChartsOption.series[1].data.push(element.allNum);
            });
            this.$refs.barCharts.setCharts(this.barChartsOption);
          }
        },
        (result) => {}
      );
    },
    // 获取最新评价
    getNewComment() {
      var user = this.$cookies.get("user");
      this.COMMON.httpPost(
        this,
        "commentsOperation/getNewComment",
        { authorId: user.id },
        (result) => {
          if (result.result === "SUCCESS") {
            this.comments = result.list;
          }
        },
        (result) => {}
      );
    },
  },
  mounted: function () {
    this.getTodayReadNum();
    this.getNewComment();
  },
};
</script>

<style>
#console-index {
  overflow: scroll; /* x y 方向都会*/
}
</style>